<!-- 热歌榜页面 -->
<template>
  <div class="hotRank">
    <!-- 头部标题 -->
    <div class="hottop">
      <div class="hoticon"></div>
      <div class="update">更新日期：{{ updateTime }}</div>
    </div>

    <music-list
      :musicList="showList"
      :showNum="true"
      @play="$emit('play1', $event)"
    ></music-list>

    <div class="loading" ref="loading">
      {{
        this.hotSongList.length / 20 >= this.page ? loadingText : "没有更多了"
      }}
    </div>
  </div>
</template>

<script>
import musicList from "../components/musicList.vue";
export default {
  name: "hotRank",
  data() {
    return {
      // 热歌榜数据
      hotSongList: [],
      // 当前页码
      page: 1,
      // 底部文字
      loadingText: "加载更多...",
      // 模拟是否发送请求
      isFinish: true,
      // 月
      updateTime: "",
    };
  },
  methods: {
    getHotSong() {
      this.$axios
        .get("/playlist/detail?id=3778678")
        .then((res) => {
          // console.log(res.data.playlist.updateTime)
          //处理数据
          let time = res.data.playlist.updateTime;

          let date = new Date(time);
          let month_ = date.getMonth(date) + 1;
          let day_ = date.getDate(date);
          // console.log(month_)
          // console.log(day_)
          this.updateTime = month_ + "月" + day_ + "日";

          this.hotSongList = res.data.playlist.tracks.map((item, index) => {
            item.song = {
              //歌曲别名
              alia: item.alia,
              //歌曲码率
              privilege: res.data.privileges[index],
              //歌手
              artists: item.ar,
              //专辑
              album: item.al,
            };
            return item;
          });
          // console.log(this.hotSongList);
        })
        .catch((error) => {
          if (error.response) {
            // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
            console.log(
              "热歌榜页面 hotRank 获取音乐错误，请求发送成功，但返回状态码异常"
            );
            console.log("返回体数据==>", error.response.data);
            console.log("返回状态代码==>", error.response.status);
            console.log("返回头==>", error.response.headers);
          } else if (error.request) {
            // 请求已经成功发起，但没有收到响应
            // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
            // 而在node.js中是 http.ClientRequest 的实例
            console.log("热歌榜页面 hotRank 获取音乐错误，请求发送失败");
            console.log("此次发送的请求==>", error.request);
          } else {
            // 发送请求时出了点问题
            console.log("热歌榜页面 hotRank 获取音乐错误");
            console.log("问题错误==>", error.message);
          }
          console.log("error.config==>", error.config);
        });
    },
    // 页面滚动事件监听
    scrollBottomRefresh() {
      // 判断是否触底的条件
      // 页面最底部的标签距离最顶部的distance+本身的高度===本视图高度+被卷去的高度
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // console.log("----");
      // //最底部的标签距离最顶部距离
      // console.log(this.$refs.loading.offsetTop);
      // // 被卷去高度
      // console.log(scrollTop);
      // // 本身高度
      // console.log(this.$refs.loading.offsetHeight);
      // // 页面高度
      // console.log(window.innerHeight);
      if (this.page > this.hotSongList.length / 20) return;
      if (
        this.$refs.loading.offsetTop + this.$refs.loading.offsetHeight + 50 ===
        scrollTop + window.innerHeight
      ) {
        this.isFinish = false;
        this.loadingText = "加载中...";
        setTimeout(() => {
          this.page++;
          this.isFinish = true;
        }, 1000);
      }
    },
  },
  computed: {
    showList() {
      let end = this.page * 20;
      return this.hotSongList.slice(0, end);
    },
  },
  components: {
    musicList,
  },
  created() {
    this.getHotSong();
    // console.log(this.showList[0]);
  },
  //在页面渲染完成后进行事件监听
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("scroll", this.scrollBottomRefresh);
    });
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollBottomRefresh);
    // console.log(this.showList[0]);
  },
};
</script>

<style lang="scss" scoped>
.hotRank {
  .hottop {
    position: relative;
    width: 100vw;
    //根据宽计算高，高度没有百分比，所以用vw，vh
    height: calc(292 / 750 * 100vw);
    background: url(../assets/image/hot_music_bg_2x.jpg);
    background-size: contain;

    .hoticon {
      width: 142px;
      height: 67px;
      background: url(../assets/image/index_icon_2x.png);
      background-size: 166px 97px;
      background-position: -24px -30px;
      position: absolute;
      left: 10px;
      top: 25px;
    }
    .update {
      position: absolute;
      color: #fff;
      left: 10px;
      bottom: 20px;
    }
  }

  .loading {
    text-align: center;
    color: #999;
    padding-top: 10px;
    padding-bottom: 5px;
  }
}
</style>


